<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品细节</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566168_uyjkrmldiyj.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <link rel="stylesheet" href="../css/detail.css">
    <style>

    </style>
</head>

<body>

    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/SHA1.js"></script>

    <div id="container">
        <div class="goods-container">
            <div id="picture" class="picture">
                <img v-bind:src="goodsList[0].thumbnail" alt="">
            </div>
            <!-- 幻灯片结束 -->


            <!-- 商品详情开始 -->
            <div class="textbox">
                <section id="tt" class="part">
                    <div class="text-file">
                        <div class="row">
                            <span class="font_center">
                                <i>¥</i>
                                <span class="font-center1">
                                   {{goodsList[0].price}}
                                    <span class="font-center2">
                                        <i>起</i>
                                    </span>

                                </span>

                            </span>
                            <span class="font-center3">
                                <del>
                                    ¥
                                    <!-- -->
                                    {{goodsList[0].originPrice}}
                                </del>

                            </span>
                            <span class="font-center4">
                                已购{{goodsList[0].reserver}}件

                            </span>
                        </div>
                        <div class="Name">
                            <span class="name-field">
                                {{goodsList[0].name}}
                                <span class="name-exchange">
                                    退货包运费



                                </span>
                            </span>


                        </div>
                        <div class="hint">
                            <span class="return">
                                返现

                            </span>
                            <span class="return-cash">店铺内购满52元反3元</span>

                        </div>
                        <div class="line">

                        </div>
                        <div class="detail">
                            <div class="exemption-from-postage">
                                <span> 全场包邮</span>

                            </div>
                            <div class="return-and-change">
                                <div class="dot">

                                </div>
                                <span> 7天无理由退换</span>

                            </div>
                            <div class="quickly">
                                <div class="dot1">

                                </div>
                                <span> 48小时发货</span>

                            </div>
                        </div>
                        <div class="line-line">

                        </div>
                        <div class="shop">
                            <p>商品详情</p>
                            <div class="goods-details-attr">
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].brand}}</div>
                                    <div class="attr-vaule">{{goodsList[0].brandname}}</div>

                                </div>
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].lining}}</div>
                                    <div class="attr-vaule">{{goodsList[0].liningname}}</div>

                                </div>
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].style}}</div>
                                    <div class="attr-vaule">{{goodsList[0].stylename}}</div>

                                </div>
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].shape}}</div>
                                    <div class="attr-vaule">{{goodsList[0].shapename}}</div>

                                </div>
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].article}}</div>
                                    <div class="attr-vaule">{{goodsList[0].articlename}}</div>

                                </div>
                                <div class="attr-item">
                                    <div class="attr-key">{{goodsList[0].yearseason}}</div>
                                    <div class="attr-vaule">{{goodsList[0].yearseasonname}}</div>

                                </div>


                            </div>
                        </div>
                        <div class="collect">
                            <div class="collect-baby">
                                收藏宝贝 优先发货 {{goodsList[0].fullname}}

                            </div>

                        </div>
                       
                       
                       
                        <div class="images">
                            <ul class="islider-outer">
                                <li>
                                    <img v-bind:src="goodsList[0].ex_information" alt="">
                                    <img v-bind:src="goodsList[0].ex_color" alt="">
                                    <img v-bind:src="goodsList[0].ex_color1" alt="">

                                </li>
                            </ul>

                        </div>


                    </div>


                </section>


            </div>
            <!-- 商品详情结束 -->


            <!-- 底部导航栏开始 -->
            <div class="tabbar">
                <ul>
                    <li>
                        <a href="../html/home.html">
                            <span class="iconfont icon-return"></span>
                            <p>返回</p>
                        </a>
                    </li>
                    <li>
                        
                            <span class="iconfont icon-collect"></span>
                            <p>收藏</p>
                        
                    </li>
                    <li>
                            <span class="iconfont icon-service"></span>
                            <p>客服</p>
                    </li>
                    <txt type="txt" style="background-color:#f3aba7;color: #fff; " v-on:click="vent()">
                        <p>加入购物车</p>
                    </txt>

                    <txt type="txt" style="background-color:#e02e24;color: #fff">
                        <p>立即购买</p>
                    </txt>
                </ul>


            </div>
            <!-- 底部导航栏结束 -->



        </div>
    </div>
    <!-- 连接数据库，获取数据 -->
    <script>
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

        var now = Date.now();
        var appKey = SHA1("A6022604509435" + "UZ" + "A1EFE090-C505-B2A5-A468-BA148F436873" + "UZ" + now) + "." + now;
        var vm = new Vue({
            el: "#container",
            data: {
                goodsList: []
            },
            created: function () {
                this.getGoodList()
            },
            methods: {
                getGoodList: function () {
                    var _this = this;
                    var par={
                        where:{
                            id:getQueryVariable("id")
                        }
                    }
                    axios.get('https://d.apicloud.com/mcm/api/ware?filter='+JSON.stringify(par), {
                        headers: {
                            'X-APICloud-AppId': 'A6022604509435',
                            'X-APICloud-AppKey': appKey
                        }
                    })
                        .then(function (response) {
                            console.log(response.data)
                            _this.goodsList = response.data;
                            console.log(response.data);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

            },
                vent(){
                    this.$toast('已成功添加购物车');//添加一个主键，通过触发时间，来实现轻提示
                }
            },
        })
    </script>
    <!-- 连接数据库，获取数据 -->

</body>

</html>